<template>
  <div v-loading="loading"
       element-loading-text="首页信息加载中...">
    <div>
      <el-carousel height="740px" motion-blur>
        <el-carousel-item v-for="item in sideImage" :key="item.uid">
          <el-image style="width: 100%; height: 100%" :src="item.url" fit="cover" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div style="padding: 0 20px" class="miaoshu1">
      <div style="display: flex;flex-direction: column;align-items: center;margin-top: 40px">
        <div style="font-size: 48px;color: #e4e4e4;text-transform: uppercase;font-weight: bold;">COVER INDUSTRY</div>
        <div style="margin-top:-40px;margin-bottom: 15px;font-size: 36px;color: #333;">
          {{ scrStore.brandName }}
        </div>
        <h3 style="line-height: 24px;
    font-size: 14px;
    color: #676767;letter-spacing: 5px;margin-bottom: 40px">
          {{ brandInfo.keywordsJson }}
        </h3>
      </div>
    </div>
    <div class="miaoshu2">
      <img src="https://www.knschina.cn/Uploads/Content/2018-09-27/5bac41d84a41f.jpg">
    </div>
    <div style="padding: 0 20px" class="miaoshu3">
      <div style="display: flex;flex-direction: column;align-items: center;margin-top: 40px">
        <div style="font-size: 48px;color: #e4e4e4;text-transform: uppercase;font-weight: bold;">ABOUT US</div>
        <div style="margin-top:-40px;margin-bottom: 15px;font-size: 36px;color: #333;">
          关于我们
        </div>
        <div class="ql-editor" v-html="brandInfo.weJson"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { getItem, setItem } from '~/utils/index'
  import { getPinLogingBg } from '~/api/login'
  import { useRouter } from 'vue-router'
  import { screenStore } from '~/stores/modules/screen'
  import gsap from 'gsap'
  const router = useRouter()
  const scrStore = screenStore()
  const sideImage = ref([])
  const brandInfo = reactive({})
  const loading = ref(false)
  onMounted(() => {
    loading.value = true
    const id = getItem('pinpaiId')
    getPinLogingBg(id).then(res => {
      if (res.code == 200) {
        loading.value = false
        Object.assign(brandInfo, {
          ...res.data
        })
        sideImage.value = JSON.parse(brandInfo.slideshowJson)
        scrStore.guanwangPage = JSON.parse(brandInfo.official)
        gsap.fromTo(".miaoshu1", {
          opacity:0,
          rotation: 0,
        },{
          opacity:1,
          rotation: 360,
          duration: 1.5,
        });
        gsap.fromTo(".miaoshu2", {
          opacity:0,
          rotation: 0,
        },{
          opacity:1,
          rotation: 360,
          duration: 1.5,
        });
        gsap.fromTo(".miaoshu3", {
          opacity:0,
          rotation: 0,
        },{
          opacity:1,
          rotation: 360,
          duration: 1.5,
        });
      } else {
        loading.value = false
      }
    }).catch(() => {
      loading.value = false
    })
  })
</script>

<style scoped>

</style>
